<template>
  <div>
    <el-drawer
      :visible.sync="drawer2"
      :with-header="true"
      direction="rtl"
      custom-class="drawerPublic"
    >
      <div class="drawer-w">
        <el-tabs v-model="activeName3" @tab-click="handleClickTab3">
          <el-tab-pane label="图层" name="d1">
            <div class="drawer-block-h">
              <el-row class="MapTypeList_class">
                <el-col :span="24">
                  <div class="flex-wrap">
                    <div
                      class="flex-16"
                      v-for="(item, index) in MapTypeList"
                      :key="index"
                    >
                      <div
                        class="r-c-img-w-li-flex"
                        @click="MapTypeClick(item)"
                      >
                        <div class="r-c-img-w-li-flex-c">
                          <div class="r-c-img-w-li-flex-c-posi">
                            <el-avatar
                              size="medium"
                              :src="item.img"
                            ></el-avatar>
                          </div>
                          <div class="r-c-img-w-li-flex-c-txt">
                            {{ item.name }}
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </el-col>
              </el-row>

              <el-row class="MapTypeListOther_wrap_class">
                <el-col
                  :span="24"
                  v-for="(items, inx) in MapTypeListOther"
                  :key="inx"
                  class="MapTypeListOther_class"
                >
                  <el-row class="MapTypeListOther_title_class">
                    <el-col :span="15">{{ items.title }}</el-col>
                    <el-col :span="9" v-if="inx == 0">
                      <el-checkbox
                        v-model="MapTypeListAllChecked"
                        @change="MapTypeListAllChange(MapTypeListAllChecked)"
                        >全部在地图上显示</el-checkbox
                      >
                    </el-col>
                  </el-row>
                  <div class="flex-wrap">
                    <div
                      class="flex-16"
                      v-for="(item, index) in items.list"
                      :key="index"
                    >
                      <div
                        class="r-c-img-w-li-flex"
                        :class="item.checked ? 'on' : ''"
                        @click="MapTypeOtherClick(item)"
                      >
                        <div class="r-c-img-w-li-flex-c">
                          <div class="r-c-img-w-li-flex-c-posi">
                            <!-- <el-avatar size="medium"
                              src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"></el-avatar> -->
                            <i :class="item.icon"></i>
                          </div>
                          <div class="r-c-img-w-li-flex-c-txt">
                            {{ item.name }}
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </el-col>
              </el-row>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-drawer>
  </div>
</template>
<script>
import map1 from "@/assets/img/map1.jpg";
import map2 from "@/assets/img/map2.jpg";
import map3 from "@/assets/img/map3.jpg";
import map4 from "@/assets/img/map4.jpg";
export default {
  data() {
    return {
      // 图层弹窗参数
      drawer2: false,
      activeName3: "d1",
      MapTypeList: [
        { name: "标准地图", value: BMAP_NORMAL_MAP, img: map1 },
        { name: "卫星地图", value: BMAP_SATELLITE_MAP, img: map2 },
        { name: "航道地图", value: BMAP_HYBRID_MAP, img: map3 },
        { name: "3D地图", value: BMAP_EARTH_MAP, img: map4 },
      ], //地图类型
      MapTypeListOther: [
        {
          title: "设备信息",
          level: 1,
          list: [
            {
              name: "视频监控",
              value: 1,
              id: '1-1',
              checked: false,
              icon: "iconfont icon-shipinjiankong",
              img: map1,
              points: [
                { lat: 39.918707886288736, lng: 116.3812908367076, label: '西单商场' },
                {
                  lat: 39.91515447121635, lng: 116.40411229117434, label: '天安门东'
                },
                {
                  lng: 116.40356881335507, lat: 39.92379877098977, label: '故宫博物馆'
                },
                {
                  lng: 116.43368001404953, lat: 39.909410503699284, label: '北京站'
                },
              ]
            },
            {
              name: "单兵",
              value: 2,
              id: '1-2',
              checked: false,
              icon: "iconfont icon-danbing-tianchong",
            },
            {
              name: "无人机",
              value: 3,
              id: '1-3',
              checked: false,
              icon: "iconfont icon-wurenji",
            },
          ],
        },
        {
          title: "基础信息",
          level: 2,
          list: [
            {
              name: "城市村庄",
              value: 1,
              id: '2-1',
              checked: false,
              icon: "iconfont icon-xiaoqucunzhuang",
              points: [
                { lng: 116.37000811950229, lat: 39.9053148244471, label: '长椿街' }
              ]
            },
            {
              name: "水源",
              value: 2,
              id: '2-2',
              checked: false,
              icon: "iconfont icon-shuiyuan",
            },
            {
              name: "学校",
              value: 3,
              id: '2-3',
              checked: false,
              icon: "iconfont icon-xuexiao",
            },
            {
              name: "医院",
              value: 4,
              id: '2-4',
              checked: false,
              icon: "iconfont icon-yiyuan1",
            },
            {
              name: "重要工程",
              value: 5,
              id: '2-5',
              checked: false,
              icon: "iconfont icon-PT-lanling-fang",
            },
            {
              name: "物资仓库",
              value: 6,
              id: '2-6',
              checked: false,
              icon: "iconfont icon-wuzicangku",
            },

            {
              name: "避难所",
              value: 7,
              id: '2-7',
              checked: false,
              icon: "iconfont icon-yingjibinansuo",
            },
            {
              name: "消防栓",
              value: 8,
              id: '2-8',
              checked: false,
              icon: "iconfont icon-miehuoqi",
            },
            {
              name: "矿山企业",
              value: 9,
              id: '2-9',
              checked: false,
              icon: "iconfont icon-mining",
            },
            {
              name: "农场",
              value: 10,
              id: '2-10',
              checked: false,
              icon: "iconfont icon-a-2-Medium-LightSkinTone106",
            },
            {
              name: "生产企业",
              value: 11,
              id: '2-11',
              checked: false,
              icon: "iconfont icon-shengchanqiye",
            },
          ],
        },
        {
          title: "协同应急",
          level: 3,
          list: [
            {
              name: "救援队",
              value: 1,
              id: '3-1',
              checked: false,
              icon: "iconfont icon-yiyuan",
            },
            {
              name: "消防局",
              value: 2,
              id: '3-2',
              checked: false,
              icon: "iconfont icon-xiaofangche",
            },
            {
              name: "医疗单位",
              value: 3,
              id: '3-3',
              checked: false,
              icon: "iconfont icon-yiliaojiuyuandui",
            },
            {
              name: "乡镇街道",
              value: 4,
              id: '3-4',
              checked: false,
              icon: "iconfont icon-a-xiangzhenjiedao",
            },
            {
              name: "官民运输",
              value: 5,
              id: '3-5',
              checked: false,
              icon: "iconfont icon-shouyunche",
            },
          ],
        },
      ], //图层弹窗-定点信息
      MapTypeListAllChecked: false, //图层弹窗-是否全在地图上显示
    };
  },
  mounted() {},
  methods: {
    // 初始化
    init() {
      this.drawer2 = true;
    },
    // 图层弹窗-tab-选中的值
    handleClickTab3(tab) {
      this.activeName3 = tab.name;
    },
    // 地图类型点击事件
    MapTypeClick(item) {
      console.log("地图类型点击事件", item);
      this.$emit('MapTypeClick',item)
    },
    // 图层弹框-设备信息-icon-点击事件
    MapTypeOtherClick(item) {
      console.log("图层弹框-设备信息-icon-点击事件", item);
      item.checked = !item.checked
      this.$emit('MapTypeOtherClick', item)
      return item
    },
    // 图层弹窗-是否全在地图上显示
    MapTypeListAllChange(val) {
      console.log("MapTypeListAllChecked", val);
      this.MapTypeListAllChecked = val;
      this.MapTypeListOther.map((items) => {
        items.list.map((item) => {
          item.checked = val;
        });
      });
      this.$emit('MapTypeListAllChange', this.MapTypeListOther)
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../../../assets/emergency.scss";
</style>
<style lang="scss" scoped>
@import "../../../assets/emergency_gis.scss";
</style>